<template>
    <div :class="{'opacity_panel': !showPanel}" class="audit_panel">
        <!--电核记录操作面板-->
        <h3 class="urging_panel_title">{{ $t('tel.telRecord') }}</h3>
        <!--电核记录start-->
        <div class="audit_panel_module">
            <div class="panel_content">
                <el-form :rules="rules" ref="form" :model="form" label-position="top">
                    <el-form-item :label="$t('tel.telResult')" prop="verifyResult"><!--电核结果-->
                        <el-select :disabled="submitButt" v-model="form.verifyResult" @change="changeVal" :placeholder="$t('verify.plsChoose')">
                            <el-option key="0" :label="$t('common.waitFollow')" value="0"></el-option><!--待跟进-->
                            <el-option key="1" :label="$t('common.pass')" value="1"></el-option><!--通过-->
                            <el-option key="2" :label="$t('common.refuse')" value="2"></el-option><!--拒绝-->
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('common.reason')" prop="reason"><!--原因-->
                        <el-select v-model="form.reason" :placeholder="$t('verify.plsChoose')" style="width: 100%;" :disabled="submitButt">
                            <el-option v-for="item in reasonlist" :key="item.dictCode" :value="item.dictCode" :label="item.dictCode + '-' + item.dictCodeNameReturn"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('common.remark')"><!--备注-->
                        <el-input :disabled="submitButt" v-model="form.remark" type="textarea" :placeholder="$t('verify.plsInput')" :maxlength="200" :rows="6"></el-input>
                    </el-form-item>
                    <el-form-item class="form_btn">
                        <el-button @click="clear" type="primary" :disabled="submitButt">{{ $t('common.empty') }}</el-button>
                        <el-button @click="submitForm" type="primary" :disabled="submitButt">{{ $t('common.submit') }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!--<iframe :src="callSrc" width="0" height="0" style="opacity: 0;" frameborder="0"></iframe>-->
    </div>
</template>

<script>
    import EventBus from '@/libs/event-bus';
    import {eventConf} from '@/config/';

    export default {
        name: 'telOperationRecords',
        props: {
            showPanel: {
                type: Boolean,
                default: false
            },
            userData: {
                type: Object
            }
        },
        data() {
            return {
                phoneAnswer: '',
                cardIdAnswer: '',
                bankAnswer: '',
                addressAnswer: '',
                contactsAnswer: '',
                companyNameAnswer: '',
                periodAnswer: '',
                amountAnswer: '',
                orderNid: '',
                userId: '',
                user: this.$storage.get('user'),
                reasonlist: [],
                submitButt: false,
                form: {
                    verifyResult: '',
                    reason: '',
                    remark: '',
                },
                verifyResult: '',
                rules: {
                    verifyResult: [
                        {required: true, message: this.$t('verify.plsChoose')}
                    ],
                    reason: [
                        {required: true, message: this.$t('verify.plsChoose')}
                    ],
                },
                dictType: '',
                changeFlag: false,
            };
        },
        watch: {
            'form.verifyResult'() {
                if (this.form.verifyResult === '1') {
                    this.dictType = 'SuccessCode';
                } else if (this.form.verifyResult === '2') {
                    this.dictType = 'RefuseCode';
                } else if (this.form.verifyResult === '0') {
                    this.dictType = 'WaitCode';
                } else {
                    this.dictType = 1;
                }
                this.queryTelCode();
            },
        },
        methods: {
            // 获取原因码
            queryTelCode() {
                const params = {
                    dictType: this.dictType,
                };
                this.$api.tel.queryTelCode(params, {showLoading: false}).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && error === '00000000') {
                        this.reasonlist = data;
                    }
                });
            },
            // 获取订单状态
            getOrderInfo() {
                this.$api.tel.getOrderInfo({orderNid: this.orderNid}).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && error === '00000000' && data[0]) {
                        this.orderStatus = data[0].checkStatus;
                        if (this.orderStatus !== '0') {
                            this.submitButt = true;
                            EventBus.$emit('myparam', this.orderStatus);
                        }
                    }
                });
            },
            // 提交
            submitForm() {
                this.$refs.form.validate((val) => {
                    if (val) {
                        let params = {
                            userId: this.userId,
                            orderNid: this.orderNid,
                            operPeopleId: this.user.id,
                            operPeopleName: this.user.username,
                            remark: this.form.remark,
                            verifyResult: this.form.verifyResult,
                            reasonList: [this.form.reason],
                        };
                        this.$api.tel.addVerifyRecords(params).then((res) => {
                            const {status, error} = res;
                            if ('1' === status && error === '00000000') {
                                this.$message.success(this.$t('common.successfulOperation'));
                                this.clear();
                                this.$emit('updateTable', 'hisTelRecord');
                                EventBus.$emit(eventConf.UPDATATELRECORD);
                                this.getOrderInfo();
                            }
                            else if ('2' === status && error === '00000000') {
                                this.$message.error('风控拒绝类型订单超过本日上限,提交失败');
                            }
                        });
                    }
                });
                //  提交用户信息 老铁电核不需要记录顺序
                let params1 = {
                    orderNid: this.orderNid,
                    operPeopleId: this.user.id,
                    phoneAnswer: this.phoneAnswer,
                    cardIdAnswer: this.cardIdAnswer,
                    bankAnswer: this.bankAnswer,
                    addressAnswer: this.addressAnswer,
                    contactsAnswer: this.contactsAnswer,
                    companyNameAnswer: this.companyNameAnswer,
                    periodAnswer: this.periodAnswer,
                    amountAnswer: this.amountAnswer,
                };
                this.$api.tel.insertTelAnswer(params1).then((res) => {
                    const {status} = res;
                    if (status === '1') {
                        //
                    }
                });
            },
            clear() {
                const {form} = this.$refs;
                if (form) {
                    form.resetFields();
                }
                this.form.remark = '';
            },
            listenEvent() {
                EventBus.$on('myParams1', (msg) => {
                    this.phoneAnswer = msg;
                });
                EventBus.$on('myParams2', (msg) => {
                    this.cardIdAnswer = msg;
                });
                EventBus.$on('myParams3', (msg) => {
                    this.bankAnswer = msg;
                });
                EventBus.$on('myParams4', (msg) => {
                    this.addressAnswer = msg;
                });
                EventBus.$on('myParams5', (msg) => {
                    this.contactsAnswer = msg;
                });
                EventBus.$on('myParams6', (msg) => {
                    this.companyNameAnswer = msg;
                });
                // EventBus.$on('myParams7', (msg) => {
                //     this.periodAnswer = msg;
                // });
                // EventBus.$on('myParams8', (msg) => {
                //     this.amountAnswer = msg;
                // });
                EventBus.$on('myParams8', (msg) => {
                    this.periodAnswer = msg;
                });
                EventBus.$on('myParams7', (msg) => {
                    this.amountAnswer = msg;
                });
                EventBus.$on('myParams9', (msg) => {
                    this.answerRank = msg;
                });
            },
            changeVal() {
                if (this.changeFlag) {
                    this.form.reason = '';
                } else {
                    this.changeFlag = true;
                }
            },
        },
        created() {
            if (this.showPanel) {
                const params = this.$route.params;
                if (params.orderNid) {
                    this.orderNid = params.orderNid;
                    this.userId = params.userId;
                    this.getOrderInfo();
                    this.listenEvent();
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    @import "~@/assets/scss/function";

    .audit_panel {
        /*padding: 0 16px;*/
    }

    .opacity_panel {
        opacity: 0.6;
    }

    .urging_panel_title {
        height: 52px;
        line-height: 52px;
        background-image: url("~@/assets/img/icon_edit.png");
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 32px;
        border-bottom: 1px solid #d4d7da;
        margin: 0 16px;
    }

    .audit_panel_module {
        margin: 20px 0 30px;
    }

    .audit_panel_module_title {
        padding-left: 16px;
        border-left: 2px solid $primary;
        margin-bottom: 12px;
    }

    .panel_content {
        padding: 0 16px;
        font-size: 12px;
    }

    .tips_row {
        margin-top: 12px;
        color: #a6a8aa;
    }

    .tips_row_title {
        color: $colorText;
    }

    .tips_code, .tips_type {
        padding-right: 5px;
    }

    .form_btn {
        text-align: right;
    }

    .conclusion_radio {
        text-align: right;
    }

    .iconLeft {
        margin-left: 10px;
        border-radius: 15px;
    }
</style>
